<template>
	<view class="sxran-im-user-list">
		<sxran-im-search @input='onSearchInput'></sxran-im-search>
		<view class="sxran-im-user-list-body">
			<scroll-view class="scrll-view">
				<template v-for="(item,index) in chatList" :key='index'>
					<sxran-im-list-item :class="{'item-active': currentConversationId == item.id}" @change='onChange(item)'
						:title='item.title' :avatarText='item.nick' :avatar-url="item.avatar"
						:note='$u.removeHtmlTags(item.lastMsgNote)' :time="toFriendlyTime(item.updateTime)"
						:badgeText='item.unreadCount'></sxran-im-list-item>
				</template>

				<view class="load-more" v-if="loading">
					<uni-load-more :status="status" :contentText='contentText'></uni-load-more>
				</view>
			</scroll-view>
		</view>
	</view>

</template>

<script>
	export default {
		name: 'chat-list',
		props: {

		},
		data() {
			return {
				num: 50,
				status: 'loading',
				loading: false,
				data: [],
				words: '',
				// chatList: [],
				contentText: {
					contentdown: '查看更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				},
			}
		},
		computed: {
			chatList() {
				return uni.$Im.getConversation(this.words);
			},
			currentConversationId() {
				return uni.$Im.getCurrentConversationId();
			},
			toFriendlyTime() {
				return function(time) {
					let timestamp = time + uni.$Im.getHeartbeat() * 0;
					return uni.$u.toFriendlyTime(timestamp)
				}
			}
		},
		async mounted() {
			uni.$Im.getConversationCmdMethods();
			uni.$Im.postConversationMessage();
		},
		methods: {
			onChange(value) {
				console.log(value, '---')
				//更新会话ID
				uni.$Im.setCurrentConversationId(value.id);
				//根据会话id 获取会话信息
				const conversation = uni.$Im.getConversationById(value.id);
				uni.$Im.getConversationByIdMessageList({
					"conversation": conversation.id,
					"maxTime": Date.now(),
					"offset": 1,
					"count": 20,
				}, (data) => {
					uni.$Im.clearCurrentConversationUnreadCount(value.id)
				})
				
				// #ifdef H5
				//检测是否为浏览器移动端
				if (uni.$u.isMobile()) {
					uni.navigateTo({
						url: '/uni_modules/sxran-im-modules/pages/chat/chat'
					})
				}
				// #endif


				// #ifndef H5
				uni.navigateTo({
					url: '/uni_modules/sxran-im-modules/pages/chat/chat'
				})
				// #endif

			},

			//防抖搜索
			onSearchInput: uni.$u.debounce(function(words) {
				this.words = words;
				// setTimeout(() => {
				// //非空过滤
				// if (words) {
				// 	this.data = this.chatList.filter(item => item.nickname.includes(words));
				// 	if (!this.data.length) {
				// 		this.contentText.contentnomore = '该用户不存在'
				// 		this.loading = true;
				// 		this.status = 'noMore'
				// 	}
				// 	return;
				// }
				// //显示全部
				// this.data = this.chatList;
				// //非空过滤
				// if (words) {
				// 	this.data = this.chatList.filter(item => item.nickname.includes(words));
				// 	if (!this.data.length) {
				// 		this.contentText.contentnomore = '该用户不存在'
				// 		this.loading = true;
				// 		this.status = 'noMore'
				// 	}
				// 	return;
				// }
				// //显示全部
				// this.data = this.chatList;
			}, 500)

		},
	}
</script>

<style scoped lang="scss">
	.sxran-im-user-list {
		height: 100%;
		display: flex;
		flex-direction: column;

		.sxran-im-user-list-body {
			flex-grow: 1;
			overflow: hidden;

			.scrll-view {
				height: 100%;

				.item-active {
					background-color: var(--uni-bg-color-active);
				}

				.load-more {
					height: 100%;
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}
</style>